import { useCallback, useState } from 'react';
import {useMutation, useQuery, useQueryClient} from 'react-query'
import useList from "../hooks/use-list"
import { getTopics, postTopic } from '../api/cnode';
import { ToastContainer,toast } from 'react-toastify';
const Cnode = () => {
    const [tab, setTab] = useState('');
    const client=useQueryClient;
    const {data,loading,error} = useQuery(
        ['getTopics',tab],
        ()=>getTopics(tab)
    );
    const mutation=useMutation(postTopic,
        {
            onError(error){
                toast.error(error.error_msg)
            },
            onSuccess(data){
                client.invalidateQueries(['getTopics',tab])
            }
        })
    const post=()=>{
        mutation.mutate({
            title:'tututu',
            tab:'dev',
            content:'发布一条指令',
            accesstoken:"4ef6c773-e3ea-4752-975c-a66083a4a96a"

        })
    }
    // console.log(res)
    // const [list, loading, handleTab] = useList();
    // const mutation=useMutation((data)=>{console.log(data)})


    if(loading){
        return <div>loading。。。</div>
    }
    return (
        <div>
            <div>
                <button>全部</button>
                <button onClick={() => setTab('good')}>精华</button>
                <button onClick={() => setTab('share')}>分享</button>
                <button onClick={() => setTab('ask')}>问答</button>
                <button onClick={() => setTab('test')}>测试</button>
            </div>
            <div>
            {
                data?.data.map(item=>(
                    <li key={item.id}>{item.title}</li>
                ))
            }
            </div>
            <div>
                <button disabled={mutation.isLoading} onClick={post}>发布</button>
                <ToastContainer/>
            </div>
        </div>
    )
}

export default Cnode